<template>
  <div class="main">
    <component :is="currentComponent"></component>
    <tool-bar @onChangeFragment="onChangeFragment"></tool-bar>
  </div>
</template>

<script>
import Toolbar from '@c/currency/ToolBar.vue'

export default {
  components: {
    [Toolbar.name]: Toolbar,
    home: () => import('@c/Home'),
    shopping: () => import('@c/Shopping'),
    My: () => import('@c/My')
  },
  data () {
    return {
      currentComponent: 'home'
    }
  },
  methods: {
    onChangeFragment (componentName) {
      console.log(componentName)
      this.currentComponent = componentName
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@css/style.scss';

  .main{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
</style>
